<template>
    <div>
        <ContentHeader title="订单管理">
            <el-form :model="store.searchForm" inline>
                <el-form-item>
                    <el-select v-model="store.searchForm.status" style="width:150px;">
                        <el-option v-for="(item, index) in store.statusOptions"
                            :key="index"
                            :label="item.text"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="store.searchForm.orderNo" placeholder="请输入订单号" clearable />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="store.searchForm.studentName" placeholder="请输入学员姓名" clearable />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="store.searchForm.lessonTitle" placeholder="请输入课程名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="store.searchOrders">
                        <el-icon><Search /></el-icon>
                    </el-button>
                </el-form-item>
            </el-form>
        </ContentHeader>
        <ContentBody v-loading="store.loading">
            <el-table :data="store.orders" :stripe="true" :highlight-current-row="true">
                <el-table-column property="id" width="80" />
                <el-table-column property="orderNo" label="订单号" />
                <el-table-column property="studentName" label="学员姓名" />
                <el-table-column property="lessonTitle" label="课程名称" />
                <el-table-column property="status" label="订单状态" />
                <el-table-column property="price" label="订单金额" />
                <el-table-column property="createdAt" label="创建时间" :formatter="(row: any) => timeFormatter(row.createdAt)" />
                <el-table-column label="操作" width="320">
                    <template #default="scope">
                        <el-button plain size="small"
                            :disabled="scope.row.statusCode !== 1" 
                            @click="handleComplete(scope.row)"
                        >完成订单</el-button>
                        <el-button plain size="small" 
                            :disabled="scope.row.statusCode !== 1" 
                            @click="handleCancel(scope.row)"
                        >取消订单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #pagination>
                <el-pagination 
                    background
                    hideOnSinglePage
                    layout="prev, pager, next"
                    :total="store.pager.total"
                    :page-size="store.pager.pageSize"
                    :current-page="store.pager.page"
                    @current-change="handleChange"
                />
            </template>
        </ContentBody>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useOrderStore } from '@/stores/order'
import type { OrderItem } from '@/config/types'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { timeFormatter } from '@/utils/utils'

const store = useOrderStore()
onMounted(() => store.searchOrders())

const handleChange = (page: number) => {
    store.changePage(page)
}

const handleComplete = (item : OrderItem) => {
    ElMessageBox.confirm('确定要完成订单"'+ item.orderNo +'"吗?', '确定完成', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(async() => {
        const result = await store.complete(item.id)
        if (result) {
            ElMessage.success('订单"'+ item.orderNo +'"已完成');
            store.searchOrders()
        }
    })
}

const handleCancel = (item : OrderItem) => {
    ElMessageBox.confirm('确定要取消订单"'+ item.orderNo +'"吗?', '确定取消', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(async() => {
        const result = await store.cancel(item.id)
        if (result) {
            ElMessage.success('订单"'+ item.orderNo +'"已取消');
            store.searchOrders()
        }
    })
}
</script>